<!DOCTYPE html>
<html>
<head>
    <title>Inertial Frames Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // White background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // Helper function to draw an arrow
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // --- Coordinates & Positions ---
    const originX = 80;
    const originY = 300;
    const axisEndX = 550;
    const axisEndY = 80;
    const originPrimeX = 180;
    const p2_x = 380;

    // --- Draw Frame S ---
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Y-axis
    drawArrow(originX, originY, originX, axisEndY);
    ctx.fillText('y', originX - 25, axisEndY - 10);
    // X-axis
    drawArrow(originX, originY, axisEndX, originY);
    ctx.fillText('x', axisEndX + 20, originY);
    // Origin O
    ctx.fillText('O', originX - 20, originY + 20);
    // Label S系
    ctx.font = '24px "Songti SC", "SimSun", serif';
    ctx.fillText('S系', 100, 160);

    // --- Draw Frame S' ---
    ctx.font = 'italic 22px Times New Roman';

    // Y'-axis
    drawArrow(originPrimeX, originY, originPrimeX, axisEndY);
    ctx.fillText("y'", originPrimeX + 25, axisEndY - 10);
    // X'-axis label (axis is shared)
    ctx.fillText("x'", axisEndX + 20, originY + 25);
    // Origin O'
    ctx.fillText("O'", originPrimeX - 10, originY + 25);
    // Label S'系
    ctx.font = '24px "Songti SC", "SimSun", serif';
    ctx.fillText("S'系", 230, 180);

    // --- Draw Points P1 and P2 ---
    // Point P1 at O'
    ctx.beginPath();
    ctx.arc(originPrimeX, originY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('P', originPrimeX + 20, 270);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('1', originPrimeX + 30, 274);

    // Point P2
    ctx.beginPath();
    ctx.arc(p2_x, originY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('P', p2_x, 270);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('2', p2_x + 10, 274);

    // Label for P2 distance (x'_{20} = L_0)
    const label_start_x = 250;
    const label_start_y = originY + 35;
    
    ctx.textAlign = 'left';
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText("x'", label_start_x, label_start_y);
    
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText("20", label_start_x + 11, label_start_y + 5);

    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText("= L", label_start_x + 28, label_start_y);

    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText("0", label_start_x + 46, label_start_y + 5);
    
    ctx.textAlign = 'center'; // Reset alignment

    // --- Draw velocity vector v ---
    const v_y_pos = 200;
    const v_start_x_pos = 460;
    const v_end_x_pos = 520;
    drawArrow(v_start_x_pos, v_y_pos, v_end_x_pos, v_y_pos);
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', (v_start_x_pos + v_end_x_pos) / 2, v_y_pos - 20);

</script>
</body>
</html>